<template>
  <view class="approval-detail">
    <!-- 申请人信息卡片 -->
    <view class="user-card">
      <image class="avatar" :src="detail.user.avatar" mode="aspectFill" />
      <view class="user-info">
        <view class="user-name">{{ detail.user.username }}</view>
        <view class="user-desc">{{ detail.user.nickname }} / {{ detail.user.position }}</view>
      </view>
    </view>

    <!-- 申请详情卡片 -->
    <view class="detail-card">
      <view class="detail-title">{{ detail.user.username }} -
        {{
          detail.type == 1 ? "Timecard Replacement Request" : "Leave Request"
        }}</view>
      <view class="detail-row">
        <text class="label">{{ detail.type != 1?'Type of leave':'Application time' }}:</text>
        <text class="value">{{detail.createdTime}}</text>
      </view>
      <view class="detail-row" v-if="detail.type == 1">
        <text class="label">Replacement timecard type:</text>
        <text class="value">Forget to punch in</text>
      </view>
      <view class="detail-row" v-if="detail.type == 1">
        <text class="label">Attendance type:</text>
        <text class="value">{{$dayjs(detail.date).format('MMMM D, YYYY')}}</text>
      </view>
      <view class="detail-row" v-if="detail.type == 1">
        <text class="label">Replacement date:</text>
        <text class="value">Sign-in</text>
      </view>
      <view class="detail-row" v-if="detail.type == 1">
        <text class="label">Reasons for timecard replacement:</text>
        <text class="value">{{detail.data.content}}</text>
      </view>
      
      <view class="detail-row" v-if="detail.type != 1">
        <text class="label">Start time:</text>
        <text class="value">{{ detail.start_time }}</text>
      </view>
      <view class="detail-row" v-if="detail.type != 1">
        <text class="label">End time:</text>
        <text class="value">{{ detail.end_time }}</text>
      </view>
      <view class="detail-row" v-if="detail.type != 1">
        <text class="label">Duration/day:</text>
        <text class="value">Forget to punch in</text>
      </view>
      <view class="detail-row">
        <text class="label">Picture:</text>
      </view>
      <view class="img-list">
        <view v-for="(img, idx) in images" :key="idx" class="img-item">
          <image @click="previewImage(idx)" :src="img" mode="aspectFill" />
        </view>
      </view>
    </view>

    <!-- 审批记录卡片 -->
    <view class="approval-record-card">
      <view class="approval-title">Approval record</view>
      <view class="timeline">
        <uv-steps :current="current" inactiveColor="#A2E0C4" dot direction="column">
          <uv-steps-item class="timeline-item" v-for="(item, index) in detail.approvalList" :key="index">
            <template v-slot:title>
              <view class="timeline-content">
                <view class="timeline-node">{{ nodeObj[index] }}</view>
                <view class="timeline-time">{{ item.update_time }}</view>
                <view class="timeline-user">
                  <text class="user">{{ item.user_info && item.user_info.username || item.username }}</text>
                  <template  v-if="index">
                    <text class="status" :class="item.audit_status == 3 ? 'agree' : item.audit_status == 4 ? 'reject' : 'reviewed'">{{
                      item.audit_status == 3 ? 'Agree' : item.audit_status == 4 ?'Turn down':'To be reviewed' }}</text>
                    <text class="opinion" v-if="item.user_info && item.user_info.remark" @click="showOpinion(item)">Approval opinion <text
                        class="arrow">&gt;</text></text>
                  </template>
                </view>
              </view>
            </template>
          </uv-steps-item>
        </uv-steps>
      </view>
    </view>
    <!-- 底部按钮 -->
    <view class="bottom-btns" v-if="id">
      <!-- 编辑  -->
      <button class="btn save" @tap="goBack">Cancel</button>
      <button class="btn submit" v-if="detail.status == 1" @tap="onSubmit">withdraw</button>
      <button class="btn submit" v-if="detail.status == 4 || detail.status == 5 || detail.status == 0" @tap="reSubmit">resubmit</button>
      <!-- <button class="btn submit" @tap="onSubmit(1)">withdraw</button> -->
      <!-- 新增 -->
      <!-- <template v-else>
        <button class="btn save" @tap="onSubmit(0)">Save for release</button>
        <button class="btn submit" @tap="onSubmit(1)">Submit</button>
      </template> -->
    </view>
  </view>
</template>

<script>
import { replacementAudit } from "@/api/approval";
import { replacementDetail } from "@/api/replacement";
import dayjs from '@/uni_modules/uv-ui-tools/libs/util/dayjs.js'
export default {
  data() {
    return {
      id: "",
      current: 0,
      nodeObj: {
        0: "Submit an application",
        1: "Department head approval",
        2: "Approval by department leaders",
      },
      detail: {
        user: {
          avatar: "https://cdn-icons-png.flaticon.com/512/4140/4140048.png",
          name: "Mr. Lee.",
          department: "Project Department",
          position: "Project Manager",
        },
        images: [
          "https://img.icons8.com/ios/100/000000/image.png",
          "https://img.icons8.com/ios/100/000000/image.png",
          "https://img.icons8.com/ios/100/000000/image.png",
        ],
        approvalList: [
          {
            node: "Submit an application",
            time: "2025-03-20 09:54:23",
            user: "Mr. Lee.",
            status: "Agree",
            opinion: "同意，补卡理由合理。",
          },
          {
            node: "Department head approval",
            time: "2025-03-20 09:54:23",
            user: "Mr. Lee.",
            status: "Agree",
            opinion: "同意。",
          },
          {
            node: "Approval by department leaders",
            time: "2025-03-20 09:54:23",
            user: "Mr. Lee.",
            status: "Agree",
            opinion: "同意。",
          },
        ],
      },
    };
  },
  onLoad({ id }) {
    if (id) {
      this.id = id;
      this.getData();
    }
  },
  methods: {
    getData(){
      replacementDetail({ id: this.id }).then((res) => {
        let approvalList = [res.user, ...res.audit_users];
        // if (res.audit_user) {
        //   approvalList.push(res.audit_user);
        // }
        // if (res.audit_user1) {
        //   approvalList.push(res.audit_user1);
        // }  HH:mm:ss
        this.images = res.data.images        ;
        console.log(res,'approvalDetail', this.images);
        this.detail = {
          ...res,
          createdTime: dayjs(res.created_at).format('YYYY-MM-DD HH:mm:ss'),
          start_time: res.start_time && dayjs(res.start_time).format('YYYY-MM-DD'),
          end_time: res.end_time && dayjs(res.end_time).format('YYYY-MM-DD'),
          approvalList,
        };
      });
    },
    goBack() {
      uni.navigateBack();
    },
    previewImage(current) {
			uni.previewImage({
				current,
				urls: this.images
			});
		},
    onSubmit() {//撤销
      replacementAudit({
        id: this.detail.id,
        status: '5'
      }).then(res => {
        uni.showToast({
          title: "Withdrawal successful",
        });
        this.getData()
      })
    },
    reSubmit(){
			uni.navigateTo({
				url: '/pages/Home/cardReplacement?id='+this.detail.id
			})
    },
    showOpinion(item) {
      uni.showModal({
        title: "Approval opinion",
        content: item.user_info && item.user_info.remark,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.approval-detail {
  background: #f1f3f8;
  min-height: calc(100vh - 150rpx);
  padding: 32rpx;
}

.nav-bar {
  display: flex;
  align-items: center;
  height: 56px;
  background: #fff;
  padding: 0 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);

  .back-btn {
    font-size: 22px;
    margin-right: 16px;
  }

  .title {
    font-size: 20px;
    font-weight: bold;
    flex: 1;
    text-align: center;
    margin-right: 38px;
  }
}

.user-card {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 16px;
  padding: 18px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);

  .avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-right: 14px;
    background: #f2f2f2;
  }

  .user-info {
    .user-name {
      font-size: 17px;
      font-weight: 600;
      color: #222;
    }

    .user-desc {
      font-size: 14px;
      color: #8a99a8;
      margin-top: 2px;
    }
  }
}

.detail-card {
  background: #fff;
  border-radius: 16px;
  margin-top: 16px;

  .detail-title {
    color: #1a7f3c;
    font-weight: normal;
    font-size: 13px;
    text-align: left;
    padding: 8px 14px;
  }

  .detail-row {
    display: flex;
    padding: 0px 14px;
    align-items: flex-start;
    margin: 12px 0 5px 0;

    .label {
      color: #7a8fa6;
      font-size: 14px;
      min-width: 160px;
      flex-shrink: 0;
    }

    .value {
      color: #222;
      font-size: 14px;
      text-align: right;
      flex: 1;
      word-break: break-all;
    }
  }

  .img-list {
    display: flex;
    gap: 12px;
    margin: 8px 0 0 0;
    padding: 0px 14px 12px 14px;

    .img-item {
      width: 72px;
      height: 72px;
      border-radius: 10px;
      background: #fff;
      border: 1px solid #e5e6eb;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;

      image {
        width: 60px;
        height: 60px;
        border-radius: 8px;
      }
    }
  }
}

.approval-record-card {
  background: #fff;
  border-radius: 16px;
  margin-top: 15px;
  padding: 19px 14px 10px 14px;

  .approval-title {
    font-weight: normal;
    font-size: 13px;
    color: #1d2939;
    text-align: left;
    margin-left: 5px;
    margin-bottom: 19px;
  }

  .timeline {
    position: relative;
    // &::before {
    // 	content: '';
    // 	position: absolute;
    // 	left: 0;
    // 	top: 0;
    // 	width: 2px;
    // 	height: 100%;
    // 	background: #e5e6eb;
    // 	z-index: 0;
    // }

    .timeline-item {
      display: flex;
      align-items: flex-start;
      position: relative;

      .timeline-dot {
        width: 12px;
        height: 12px;
        background: #19b36e;
        border-radius: 50%;
        margin-right: 12px;
        margin-top: 6px;
        z-index: 1;
      }

      .timeline-content {
        border-bottom: 1px solid #eaecf0;
        flex: 1;
        margin-bottom: 6px;

        .timeline-node {
          font-weight: 500;
          font-size: 13px;
          color: #1d232e;
          line-height: 19px;
          text-align: left;
        }

        .timeline-time {
          font-weight: 500;
          font-size: 12px;
          color: #98a2b3;
          text-align: left;
          margin: 2px 0 4px 0;
          margin: 12px 0;
        }

        .timeline-user {
          display: flex;
          align-items: center;
          gap: 8px;
          font-weight: 500;
          font-size: 12px;
          color: #98a2b3;
          line-height: 19px;
          text-align: left;
          margin-bottom: 12px;

          .user {
            color: #7a8fa6;
            font-size: 12px;
          }

          .status {
            font-size: 12px;
            padding: 2px 10px;
            border-radius: 12px;
            background: #e6f7ec;
            color: #19b36e;
            margin-left: 4px;
          }

          .reject {
            background: #ffeaea;
            color: #ff5252;
          }

          .reviewed {
            background: #EAECF0;
            color: #667085;
          }

          .opinion {
            color: #3b82f6;
            font-size: 12px;
            margin-left: 8px;
            cursor: pointer;

            .arrow {
              font-size: 13px;
            }
          }
        }
      }
    }
  }
}
</style>